<template>
    <div class="person">
        <h2>姓名:{{ name }}</h2>
        <h2>年龄:{{ age }}</h2>
        <h2>地址:{{ address }}</h2>
        <h2>财产:一辆价值{{ car.price }}万的{{ car.brand }}汽车</h2>
        <h2>兴趣爱好:</h2>
        <ul>
            <li v-for = "i in interest" :key="i.id">{{ i.name }}</li>
        </ul>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
        <button @click="changePrice">修改价值</button>
        <button @click="changeBrand">修改品牌</button>
        <button @click="changeInterest">修改爱好</button>
        

    </div>
</template>

<script lang="ts" setup name="person">
import {reactive, ref} from 'vue'
  
    //let name= 'zhangsan'//这些数据都不是响应式的，所以按按钮之后不会变化
    let name = ref('zhangsan')//基本数据类型的响应式只能用ref
    let age = ref(18)
    let tel='18888888888'
    let address='华北电力大学'
    let car = reactive({ brand:"奔驰",price:100 })//对象类的响应式可以用ref也可以用reactive
    let interest = ref([
        {id:1,name:'乒乓球'},
        {id:2,name:'羽毛球'},
        {id:3,name:'篮球'}
    ])

    function changeName(){
        name.value = '张三'
    }
    function changeAge(){
        age.value += 1
    }
    function showTel(){
        alert(tel)
    }
    function changePrice(){
        car.price += 10
    }
    function changeBrand(){//用reactive不用加.value
        car.brand = '宝马'
    }
    function changeInterest(){//用ref必须加上.value
        interest.value[0].name = '跑步'
    }
</script>

<style scoped>
.person{
    background: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>